<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    
	<link rel="stylesheet/less" type="text/css" href="css/style.less">
	<link rel="stylesheet" type="text/css" href="css/camera.css">
    <!-- JavaScript -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/less.js" ></script>
    <script type='text/javascript' src='js/jquery.mobile.customized.min.js'></script>
    <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> 
    <!--IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- ico and touch icons -->
    <link rel="shortcut icon" href="images/logo/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">

	<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0rc/kissy-min.js"></script>
	<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0rc/button-min.js"></script>
	<script type="text/javascript" src="http://a.tbcdn.cn/s/kissy/1.3.0rc/component-min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/loader.js"></script>
	<script type="text/javascript" src="js/waterfall.js"></script>
	<script type="text/javascript" src="js/template-min.js"></script>
	<style type="text/css">
		.icon-share-alt{
			float: right;
			cursor:pointer;
		}
		.icon-eye-open{
			background: url("images/ricon.png");
			background-position: 0 -104px;
			width: 18px;
			height: 18px;
		}
		
		.icon-comment{
			background: url("images/ricon.png");
			background-position: 2px -129px;
			width: 18px;
			height: 18px;
		}
		#slides{
			width: 100%;
			height: 425px;
		}
		#camera-slide-wrap{
			height: 400px;
			width: 1170px;
			margin: 20px auto 0;
		}
	</style>
	

</head>
<body>
		

    		<div id='ColumnContainer' style="position: relative;">
    		<div id='ColumnContainer' style="position: relative;">
    			<div class="fall-cell category ks-waterfall ks-waterfall-fixed-left">
    				<c:forEach items="${applicationScope.indexNavList}" var="nav">
    					<div class="cats">
    						<c:if test="${nav.navtype eq '1'}">
								<h3><c:out value="${nav.navname}"></c:out></h3>
								<c:forEach items="${nav.indexLabelList}" var="navLabel">
									<a class="all" title="" href="city/${navLabel.llid}">
									<span><c:out value="${navLabel.labelname}"></c:out> </span>
								</a>
								</c:forEach>
							</c:if>
							<c:if test="${nav.navtype eq '2'}">
								<h3><c:out value="${nav.navname}"></c:out></h3>
								<c:forEach items="${nav.indexLabelList}" var="navLabel">
									<a class="all" title="" href="l/${navLabel.llid}">
									<span><c:out value="${navLabel.labelname}"></c:out> </span>
								</a>
								</c:forEach>
							</c:if>
						</div>
    				</c:forEach>
				</div>
    		
				<c:forEach items="${applicationScope.IndexArticleList}" var="article" varStatus="rows">
				<div class="ks-waterfall fall-cell pins">
				<div class="hidden">

						</div>
						<div class="fall-img">
						<a href="a/${article.pictures[0].aid}"><img height="${article.pictures[0].height}px" src="${article.pictures[0].path }" /></a>
						<div class="action" id="action">
							<div class="left">
								<span><label class="icon-eye-open"></label><c:out value="${article.readCount }"></c:out>浏览</span>
								<span><label class="icon-heart"></label><c:out value="${article.collections }"></c:out>收藏</span>
								<span><label class="icon-comment"></label><c:out value="${article.remarkCount }"></c:out>评论</span>
							</div>
							<div class="right">
								<span><fmt:formatDate pattern="yyyy-MM-dd" value="${article.createTime}"/></span>
							</div>
						</div>
						</div>
			        <div class="title">
			        	<div class="fall-content">
							<div class="fall-text">
								<div class="fall-text-head clearfix">
									<a class="img-link" href="u/${article.user.uid }">
										<img src="${article.user.head }" width="30px" height="30px"/>
									</a>
									<p>
										<span class="username"><i><c:out value="${article.user.nickName }" /></i></span>
										<span><b>${article.title }</b>:${article.pictures[0].synopsis }</span>
									</p>
									
								</div>
							</div>
							<div class="fall-btn">
								<div class="left">
										<c:forEach var="label" items="${article.labels}">
											<c:if test="${label.ltype eq '2' or  label.ltype eq '3' or  label.ltype  eq '4' or label.ltype eq '5' }">
												<span class="tag"><span class="icon-map-marker"></span><span class="num"><c:out value="${label.labelName}" /></span></span>
											</c:if>
										</c:forEach>
										<c:forEach var="label" items="${article.labels}">
											<c:if test="${label.ltype eq '0' or article.labels eq '1' }">
												<span class="tag"><span class="num"> #<c:out value="${label.labelName}" /></span></span>
											</c:if>
										</c:forEach>
								</div>
								<div class="right">
									<span class="share"><span class="icon-comment-button icon-comment " alt="评论"></span></span>
								</div>
	
							</div>
						</div>
						<div class="comment">
							<div id="aid${article.aid}">
							
								<c:forEach var="remark" items="${article.remarkList}" end="3" varStatus="status">
									<c:if test="${status.index lt  3}">
										<div class="remarkinfo clearfix">
											<a class="img-link" href="u/${remark.uid}">
												<img width="30px" height="30px" alt="" src="${remark.head}" />
											</a>
											<p >
												<span class="username"><i><c:out value="${remark.nickName}"></c:out></i></span>
												<c:out value="${remark.content}" escapeXml="false" />
												<span class="icon-share-alt" alt="回复" ></span>
											</p>
										</div>
									</c:if>
									<c:if test="${status.index ge  3}">
										<div class="remarkinfo clearfix"><a href="a/${article.pictures[0].aid}">亲，可以查看更多！</a></div>
									</c:if>
								</c:forEach>
							</div>
							<input type="hidden" value="${article.aid}" name="aid">
							<div class="remarkinfo clearfix">
							<textarea type="text" class="p-comment-area" placeholder="添加评论" id="${article.aid}" rows="1.5"></textarea>
							<ul class="promptMessge">
							
							</ul>
							</div>
						</div>
			        </div>
			    </div>
				</c:forEach>
			</div>
			
			<script type="tpl" id="tpl">
				<div class="ks-waterfall fall-cell pins">
				<div class="hidden">

						</div>
						<div class="fall-img">
						<a href="a/{{aid}}"><img height="{{height}}px" src="{{url}}" /></a>
						<div class="action" id="action">
							<div class="left">
								<span><label class="icon-eye-open"></label>{{readCount}}浏览</span>
								<span><label class="icon-heart"></label>{{collections}}收藏</span>
								<span><label class="icon-comment"></label>{{remarkCount}}评论</span>
							</div>
							<div class="right">
								<span>{{createtime}}</span>
							</div>
						</div>
						</div>
			        <div class="title">
			        	<div class="fall-content">
							<div class="fall-text">
								<div class="fall-text-head clearfix">
									<a class="img-link">
										<img src="{{head}}" width="30px" height="30px"/>
									</a>
									<p>
										<span class="username"><i>{{nickName}}</i></span>
										<span><b>{{title}}</b>:{{synopsis}}</span>
									</p>
									
								</div>
							</div>
							<div class="fall-btn">
								<div class="left">
										{{label}}
								</div>
								<div class="right">
									<span class="share"><span class="icon-comment-button icon-comment" alt="评论"></span></span>
								</div>
	
							</div>
						</div>
						<div class="comment">
							<div id="aid{{aid}}">
								{{remarks}}
							</div>
							<input type="hidden" value="{{aid}}" name="aid">
							<div class="remarkinfo clearfix">
							<textarea type="text" class="p-comment-area" placeholder="添加评论" id="{{aid}}" rows="1"></textarea>
							<ul class="promptMessge" style="display: none;z-index: 100">
							
							</ul>
							</div>
						</div>
			        </div>
			    </div>   			
		   </script>
			</div>
			
			<script type="tpl" id="tpl">
				<div class="ks-waterfall fall-cell pins">
				<div class="hidden">

						</div>
						<div class="fall-img">
						<a href="a/{{aid}}"><img height="{{height}}px" src="{{url}}" /></a>
						<div class="action" id="action">
							<div class="left">
								<span><label class="icon-eye-open"></label>{{readCount}}浏览</span>
								<span><label class="icon-heart"></label>{{collections}}收藏</span>
								<span><label class="icon-comment"></label>{{remarkCount}}评论</span>
							</div>
							<div class="right">
								<span>{{createtime}}</span>
							</div>
						</div>
						</div>
			        <div class="title">
			        	<div class="fall-content">
							<div class="fall-text">
								<div class="fall-text-head clearfix">
									<a class="img-link">
										<img src="{{head}}" width="30px" height="30px"/>
									</a>
									<p>
										<span class="username"><i>{{nickName}}</i></span>
										<span><b>{{title}}</b>:{{synopsis}}</span>
									</p>
									
								</div>
							</div>
							<div class="fall-btn">
								<div class="left">
										{{label}}
								</div>
								<div class="right">
									<span class="share"><span class="icon-comment-button icon-comment" alt="评论"></span></span>
								</div>
	
							</div>
						</div>
						<div class="comment">
							<div id="aid{{aid}}">
								{{remarks}}
							</div>
							<input type="hidden" value="{{aid}}" name="aid">
							<div class="remarkinfo clearfix">
							<textarea type="text" class="p-comment-area" placeholder="添加评论" id="{{aid}}" rows="1"></textarea>
							<ul class="promptMessge" style="display: none;z-index: 100">
							
							</ul>
							</div>
						</div>
			        </div>
			    </div>   			
		   </script>
			<div>
				<a id="BackToTop" href="#" style="display: none;"></a>
	        	<div id="loadingPins" style="display: none;"><img src="../images/BouncingLoader.gif" alt="Pin Loader Image"/><span>Loading...&hellip;</span></div>
			</div>
    <!--   JavaScript
    ------------------------------------------>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="js/demo.js"></script>
	<script type="text/javascript" src="js/dynamicload.js"></script>
</body>


<script type="text/javascript">
    	var height;
    	if($.browser.msie){
    		height = document.compatMode == "CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight;
        }else{
			height = self.innerHeight;
        }
    	$(window).scroll(function(){
    		var scroll=$(window).scrollTop();
    		if(scroll - height > 0){
				$("#BackToTop").show();
        	}else{
        		$("#BackToTop").hide();
            }
        })
</script>
   <script type="text/javascript">
    	var beforeContent = "";
    	var tempNick = "";//记录变量
    	//获取p-comment-area具体位置
    	$(".p-comment-area").live('keyup',function(event){
    		//获取该节点的ul节点
    		var ul = jQuery(this).parent().children("ul")[0];
    		var newContent = $(this).val();
    		if(newContent!=null&&newContent!=''){
    			var startIndex = newContent.lastIndexOf("@");
    			if(startIndex>=0){//先要判断是否有@
    				var spaceIndex =  newContent.lastIndexOf(" ");//判断是否有空格
    				if(spaceIndex<startIndex){//表示空格在@之前
    					var length = newContent.length;
    					var nick = newContent.substring(startIndex+1,length);
    					if(nick!=null&&nick!=''){//nick不能为空，还得判断nick是否改变过
    							var html="";
    							$(ul).html(html);//先清空信息
    							$.post("getUserNickByJson",{"nick":nick},function(data){
            						if(data.code==1){
            							jQuery.each(data.info,function(id,item){
            								  html +="<li class=\"nickInfo\"><img style=\"width: 24px; height: 24px;\" src=\""+item.head+"\" /><span class=\"nick\">"+item.nickname+"</span></li>";
            							});
            						}
            						$(ul).html(html);
            						$(ul).css("display","block");
            					},"json");
    					}else{
        					$(ul).css("display","none");
        					$(ul).html("");
        				}
    				}
    			}
    		}
    	});
	    	
	    	/**鼠标放上去**/
	    	jQuery(".nickInfo").live('mouseover',function(){
	    		var ul = jQuery(this).parent();
	    		var area = jQuery(this).parent().parent().children(".p-comment-area");
	    		tempNick="";
	    		$(this).addClass("active");//使颜色加深
	    		var newContent = jQuery(area).val();
	    		var spaceIndex =  newContent.lastIndexOf("@");//
	    		var newContent = $(area).val();
	    		var element = $(this).children("span")[0];
	    		var nick = $(element).html();
	    		var temp = newContent.substring(0,spaceIndex+1);
	    		var actInfo = temp+nick+" ";
	    		jQuery(area).val(actInfo);
	    	});
	    	
	    	/**鼠标放上去**/
	    	jQuery(".nickInfo").live('mouseout',function(){
	    		tempNick="";
	    		$(this).removeClass("active");//使颜色加深
	    	});
	    	/**鼠标点击**/
	    	jQuery(".nickInfo").live('click',function(){
	    		tempNick="";
	    		//获取.p-comment-area节点
	    		var ul = jQuery(this).parent();
	    		var area = jQuery(this).parent().parent().children(".p-comment-area");
	    		var newContent = jQuery(area).val();
	    		var spaceIndex =  newContent.lastIndexOf("@");//
	    		var newContent = $(area).val();
	    		var element = $(this).children("span")[0];
	    		var nick = $(element).html();
	    		var temp = newContent.substring(0,spaceIndex+1);
	    		var actInfo = temp+nick+" ";
	    		jQuery(area).val(actInfo);
				$(ul).css("display","none");
				$(ul).html("");
	    	});
	    	
	    	jQuery(".p-comment-area").change(function(){
	    		tempNick="";
	    	});

    </script>
</html>